<template>
  <div class="homeBrand">
    <a
      href="javascript:void(0)"
      v-for="item in listOption"
      :key="item.id"
      :commonid="item.id"
      @click="setRouter(item.id)"
    >
      <img :src="item.imgSrc" alt />
    </a>
  </div>
</template>

<script>
export default {
  name: "homeBrand",
  data() {
    return {
      listOption: [
        {
          id: "afeb56cecdae4d43b045e08b923e82d7",
          imgSrc: require("@/assets/icon/1537253123662.png")
        },
        {
          id: "66f1290fd3054639b8b530b1f394ae7e",
          imgSrc: require("@/assets/icon/1537253140328.png")
        },
        {
          id: "149bc9178c5b49c3b430b8f580b3c1f4",
          imgSrc: require("@/assets/icon/1537253162890.png")
        },
        {
          id: "36f8bf7d7cdd42cea29f022b787f4683",
          imgSrc: require("@/assets/icon/1537253177953.png")
        },
        {
          id: "157d8dab2dd6451f8637c61f61e47ebb",
          imgSrc: require("@/assets/icon/1537253203264.png")
        },
        {
          id: "b0c02ecd1d764febb1a430c8fb25fa17",
          imgSrc: require("@/assets/icon/1537253220254.png")
        },
        {
          id: "8944fc36bdac4d4a84bc20a03932b447",
          imgSrc: require("@/assets/icon/1537253238961.png")
        },
        {
          id: "0dcddb7e88f54fa0a21a4cfd5d9b0334",
          imgSrc: require("@/assets/icon/1537253257853.png")
        },
        {
          id: "9e5ff71cff7d4b5ebab9688f6fc06df0",
          imgSrc: require("@/assets/icon/1537253273217.png")
        },
        {
          id: "38650203bcbc432386f948f7c15d8a0f",
          imgSrc: require("@/assets/icon/1537253289009.png")
        }
      ]
    };
  },
  methods: {
    setRouter(id) {
      this.$router.push({
        path: "/ProductList",
        query: {
          id
        }
      });
    }
  }
};
</script>
<style scoped>
.homeBrand {
  width: 100%;
}

a {
  float: left;
  box-sizing: border-box;
  position: relative;
  width: 20%;
}

a img {
  display: block;
  width: 100%;
  margin: 0 auto;
}
</style>